import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,DatePicker,Select} from 'antd';
const Search = Input.Search;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';

const { RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;
const Option = Select.Option;
import RaiseLoanTable from './RaiseLoanTable';

//筹款项目审批管理
export default class RaiseLoan extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
           page:1,
           total:1,
           size:10,
           list:[],
           search:{
            statuses:"3,5,9,7,11,15,13"
           },
           loading:false,
        };
    }

    componentWillMount(){
        this.doFetch();
    }
    

    componentWillReceiveProps(nextProps){
        
    }

    async doFetch(page=1){
      let {search,size} = this.state;

      let result = await api('/loan/raise/approve',{...search,page,size});
      if(result.cd!=0){
        message.error(result.msg);
        this.setState({loading:false})
        return;
      }
      this.setState({
          page,
          total:result.total,
          list:result.data,
          loading:false
      })
    }

    doSearch(){
      this.setState({loading:true})
      this.doFetch();
    }
    //刷新列表
    reloadTable(){
      let {page} = this.state;
      this.setState({loading:true})
      this.doFetch(page)
    }

    //处理tab切换
    handleTabsChange(statuses){
      let {search} = this.state;
      search.statuses = statuses
      this.setState({
        search,
        loading:true
      })
      this.doFetch(1);
    }
    

    //分页
    toPage({current:page,pageSize,total}){
      this.setState({loading:true})
      this.doFetch(page);
    }

   
    render() {
        var {list=[], page,size,total,loading,search}=this.state;
        let range = [];
        if(search.startTime){
            range.push(moment(search.startTime))
        }
        if(search.endTime){
            range.push(moment(search.endTime))
        }
        return (
            <div >
                <NavBar navs={[{title:'筹款项目审批'}]} />
                <ContentBody className='container'>
                  <div className='search-panel'>
                      <Row gutter={16}>
                        <Col span={8}>
                          <label>筹款人姓名:</label>
                          <Input 
                            {...this::bind_change('search.borrower_name')} 
                            placeholder="请输入筹款人姓名" 
                          />
                        </Col>
                        <Col span={8}>
                          <label>筹款人手机号:</label>
                          <Input 
                            placeholder="请输入筹款人手机号"
                            {...this::bind_change('search.borrower_phone')}  
                          />
                        </Col>
                        <Col span={8}>
                          <div>申请时间:</div>
                          <RangePicker
                            style={{width:'100%'}}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['请选择开始时间', '请选择结束时间']}
                            allowClear={true}
                            value={range}
                            onChange={(registerTime) => {
                              let {search} = this.state;
                              search.startTime = registerTime[0].format('YYYY-MM-DD HH:mm:ss');
                              search.endTime = registerTime[1].format('YYYY-MM-DD HH:mm:ss');
                              this.setState({search})
                            }}
                          />
                        </Col>
                      </Row>
                      {/*<div className='height20'></div>
                      <Row gutter={16}>
                        <Col span={12}>
                          <div>项目状态:</div>
                          <Select defaultValue="lucy" style={{ width: '100%' }} >
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>Disabled</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                          </Select>
                        </Col>
                        <Col span={12}>
                          <div>申请时间:</div>
                          <RangePicker
                            style={{width:'100%'}}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['请选择开始时间', '请选择结束时间']}
                            allowClear={true}
                            onOk={(registerTime) => {
                              let {search} = this.state;
                              search.startTime = registerTime[0].format('YYYY-MM-DD HH:mm:ss');
                              search.endTime = registerTime[1].format('YYYY-MM-DD HH:mm:ss');
                              this.setState({search})
                            }}
                          />
                        </Col>
                      </Row>*/}
                      <div className='marginT20 text-center'>
                         <Button type="primary" onClick={this.doSearch.bind(this)} icon="search">查询</Button>
                         <Button 
                            type="primary" 
                            className='marginL20' 
                            onClick={()=>{
                              this.setState({
                                search:{}
                              })
                            }} 
                          >
                          重置
                          </Button>
                      </div>
                  </div>

                  <Tabs defaultActiveKey={search.statuses} onTabClick={this.handleTabsChange.bind(this)}>
                    <TabPane tab="全部项目" key="3,5,9,7,11,15,13">
                      <RaiseLoanTable 
                        dataSource={list}
                        pagination={{
                          current:page,
                          total:total,
                          pageSize:size,
                          showQuickJumper : true
                        }}
                        loading={loading}
                        reloadTable={this.reloadTable.bind(this)}
                        toPage={this.toPage.bind(this)}
                      />
                    </TabPane>
                    <TabPane tab="筹款中" key="3">
                      <RaiseLoanTable 
                        dataSource={list}
                        pagination={{
                          current:page,
                          total:total,
                          pageSize:size,
                          showQuickJumper : true
                        }}
                        loading={loading}
                        reloadTable={this.reloadTable.bind(this)}
                        toPage={this.toPage.bind(this)}
                      />
                    </TabPane>
                    <TabPane tab="待还款" key="11">
                      <RaiseLoanTable 
                        dataSource={list}
                        pagination={{
                          current:page,
                          total:total,
                          pageSize:size,
                          showQuickJumper : true
                        }}
                        loading={loading}
                        reloadTable={this.reloadTable.bind(this)}
                        toPage={this.toPage.bind(this)}
                      />
                    </TabPane>
                    <TabPane tab="已结束" key="15">
                      <RaiseLoanTable 
                        dataSource={list}
                        pagination={{
                          current:page,
                          total:total,
                          pageSize:size,
                          showQuickJumper : true
                        }}
                        loading={loading}
                        reloadTable={this.reloadTable.bind(this)}
                        toPage={this.toPage.bind(this)}
                      />
                    </TabPane>
                    <TabPane tab="已逾期" key="13">
                      <RaiseLoanTable 
                        dataSource={list}
                        pagination={{
                          current:page,
                          total:total,
                          pageSize:size,
                          showQuickJumper : true
                        }}
                        loading={loading}
                        reloadTable={this.reloadTable.bind(this)}
                        toPage={this.toPage.bind(this)}
                      />
                    </TabPane>
                  </Tabs>

                  
                </ContentBody>
                  
            </div>
        );
    }

}

RaiseLoan.contextTypes= { router: React.PropTypes.object.isRequired};

